<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-12">
          <q-card>
            <q-card-section>
              <ve-histogram :data="playCount"/>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-12">
          <q-card>
            <q-card-section>
              <ve-line :data="playTime"/>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-12">
          <q-card>
            <q-card-section>
              <ve-histogram :data="searchKeys"/>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
  export default {
    name: "Log",
    data: function () {
      return {
        playCount: {
          columns: ['Video ID', 'Play Count', 'No Repeat Count'],
          rows: []
        },
        playTime: {
          columns: ['Hour', 'Play Count'],
          rows: [],
          yAxisName: 'Hour'
        },
        searchKeys: {
          columns: ['Key', 'Search Count'],
          rows: [],
          yAxisName: 'Key'
        }
      };
    },
    async mounted() {
      this.$q.loading.show();
      let data = await this.$axios.get('api/log');
      if (data) {
        if (data.playCount) {
          data.playCount.forEach(item => {
            this.playCount.rows.push({
              'Video ID': item.vid,
              'Play Count': item.count,
              'No Repeat Count': item.noRepeatCount
            });
          })
        }
        if (data.playTime) {
          data.playTime.forEach(item => {
            this.playTime.rows.push({
              'Hour': item.num,
              'Play Count': item.playCount
            });
          })
        }
        if (data.searchKeys) {
          data.searchKeys.forEach(item => {
            this.searchKeys.rows.push({
              'Key': item.key,
              'Search Count': item.count
            });
          })
        }
      }
      this.$q.loading.hide();
    }
  }
</script>

<style scoped>

</style>
